import { NodeSize } from '../config'

export default function mqttConsumer(flow) {
  flow.register('MqttConsumer', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M243.809524 243.809524v536.380952h312.07619l224.304762-219.428571V243.809524z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M243.809524 780.190476V243.809524h536.380952v316.952381l48.761905-48.761905V195.047619H195.047619v633.904762h309.638095l51.2-48.761905z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M607.085714 526.628571c-2.438095-36.571429-4.87619-80.457143-4.87619-114.590476-9.752381 31.695238-19.504762 63.390476-34.133334 99.961905l-46.323809 126.780952h-26.819048l-41.447619-124.342857c-12.190476-36.571429-21.942857-70.704762-29.257143-102.4 0 31.695238-2.438095 78.019048-4.87619 117.028572l-7.314286 112.152381h-31.695238l19.504762-263.314286H438.857143l43.885714 126.780952c9.752381 31.695238 19.504762 60.952381 26.819048 87.771429 7.314286-26.819048 17.066667-56.07619 26.819047-87.771429l46.32381-126.780952h43.885714l17.066667 263.314286H609.52381l-2.438096-114.590477z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M902.095238 804.571429v65.828571l-126.780952-126.780952-31.695238 31.695238 129.219047 126.780952H804.571429v48.761905h146.285714v-146.285714z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          'MQTT消费者'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
